import './App.css';
// 导入组件
import Router from './Route/index'
// app是所有组件的父组件，想要看到一个组件，需要引入到app中
import { Link, NavLink, withRouter } from 'react-router-dom';
import { Component } from 'react';
class App extends Component {
  // 跳转页面的函数
  changePage(url) {
    console.log(this.props.history);
    this.props.history.push(url)
  }
  render() {
  return (
    <div className="App">
      <Router></Router>
      <Link to="/">返回首页</Link>
      <br />
      <NavLink to="/404" activeClassName="active1">404页面</NavLink>
      <br />
      <NavLink to="/comment" activeClassName="active1">comment页面</NavLink>
      <br />
      <NavLink to="/csstransition" activeClassName="active1">csstransition页面</NavLink>
      <br />
      <NavLink to="/get?name=tom&age=18" activeClassName="active1">get页面</NavLink>
      <p>编程式导航</p>
      <button onClick={() => this.changePage('/')}>返回首页</button>
      <button onClick={() => this.changePage('/404')}>返回404页面</button>
      <button onClick={() => this.changePage('/comment')}>返回comment页</button>
      <button onClick={() => this.changePage('/csstransition')}>返回css页</button>
      <button onClick={() => this.changePage('/get?name=tony&age=20')}>返回get页面</button>
    </div>
  )};
}

export default withRouter(App);
